<script setup lang="ts">
import {
  getAclUserService,
  removeUserService,
  removeUserListService
} from '@/apis/acl/user'
import type { UserResponseData, Records, User } from '@/apis/acl/user/type'
import { ref, onMounted, watch } from 'vue'
import AssignRole from './components/assignrole/index.vue'
import AddUser from './components/adduser/index.vue'
import SearchItem from '../components/search/index.vue'
const pageSize = ref(3)
const pageNo = ref(1)
const total = ref(0)
// 获取acl信息
const keywords = ref<string>('')
const userList = ref<Records>([])
const getAclUser = async (pager = 1) => {
  pageNo.value = pager
  const res: UserResponseData = await getAclUserService(
    pageNo.value,
    pageSize.value,
    keywords.value
  )
  userList.value = res.data.records
  total.value = res.data.total
}

// 页面size变化
const onSizeChange = () => {
  getAclUser()
}
// 组件渲染
onMounted(() => {
  getAclUser()
})
// 添加、修改USer
const userRef = ref()
const choice = ref<string>('')
const updateUser = (row: User) => {
  userRef.value.openUserDrawer(row)
}
const addUser = () => {
  userRef.value.openUserDrawer({})
}
watch(choice, (newVal) => {
  if (newVal === 'add') {
    getAclUser()
  } else {
    getAclUser(pageNo.value)
  }
})

// 分配角色
const roleRef = ref()

const onAssignRole = (row: User) => {
  roleRef.value.assignRole(row)
}

// 删除用户-单个
const deleteUser = async (id: string) => {
  console.log(id)
  await removeUserService(id)
  getAclUser(userList.value.length === 1 ? pageNo.value - 1 : pageNo.value)
  ElNotification({
    title: '删除成功',
    message: '用户删除成功',
    type: 'success'
  })
}

const selectedIds = ref<string[]>([])

const onSelectionChange = (val: User[]) => {
  selectedIds.value = val.map((item) => item.id as string)
}
// 删除用户-批量
const deleteUserList = async () => {
  await ElMessageBox.confirm('确定删除吗？', '温馨提示', {
    type: 'warning'
  })
    .then(async () => {
      await removeUserListService(selectedIds.value)
      getAclUser()
      await ElNotification({
        title: '删除成功',
        message: '用户删除成功',
        type: 'success'
      })
    })
    .catch(() => {})
}

// 搜索
const goSearch = (val: string) => {
  if (val === 'search') {
    getAclUser()
  } else {
    keywords.value = ''
    getAclUser()
  }
}
</script>

<template>
  <SearchItem v-model="keywords" @search="goSearch"></SearchItem>
  <el-card style="margin: 10px 0">
    <el-button type="primary" @click="addUser" icon="Plus">添加用户</el-button>
    <el-button
      type="danger"
      icon="Delete"
      @click="deleteUserList"
      :disabled="selectedIds.length < 2"
      >批量删除</el-button
    >

    <el-table
      border
      style="margin: 10px 0"
      @selection-change="onSelectionChange"
      :data="userList"
    >
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column
        label="用户名字"
        prop="name"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="用户名称"
        prop="username"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="用户角色"
        prop="roleName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="更新时间"
        prop="updateTime"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="260px">
        <template #default="{ row }">
          <el-button type="success" round icon="User" @click="onAssignRole(row)"
            >分配角色</el-button
          >
          <el-button
            type="warning"
            circle
            icon="Edit"
            @click="updateUser(row)"
          ></el-button>
          <el-popconfirm
            @confirm="deleteUser(row.id)"
            title="你确定删除吗？"
            icon="Delete"
          >
            <template #reference>
              <el-button type="danger" circle icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      layout="prev, pager, next, jumper, ->, total, sizes"
      :total="total"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      @current-change="getAclUser"
      @size-change="onSizeChange"
      :page-sizes="[3, 7, 9]"
    >
    </el-pagination>

    <!-- 添加、修改角色 -->
    <AddUser ref="userRef" v-model="choice"></AddUser>
    <!-- 分配角色 -->
    <AssignRole ref="roleRef" @reload="getAclUser(pageNo)"></AssignRole>
  </el-card>
</template>

<style lang="scss" scoped></style>
